/********
* 字体图标
********/
@font-face {
    font-family: 'iconfont';
    src: url('../../home/fonts/iconfont.eot');
    src: url('../../home/fonts/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../../home/fonts/iconfont.woff') format('woff'),
    url('../../home/fonts/iconfont.ttf') format('truetype'),
    url('../../home/fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

*{ margin:0; padding:0; list-style:none;}
#lanren{position: fixed;right:10px;top:10px;z-index: 999;}
#lanren #audio-btn{width: 44px;height: 44px;background-size: 100% 100%;}
#lanren .on{background: url(../img/fullpage/music_on.png) no-repeat 0 0;-webkit-animation: rotating 1.2s linear infinite;animation: rotating 1.2s linear infinite;}
#lanren .off{background: url(../img/fullpage/music_off.png) no-repeat 0 0;}
@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*导航分页按钮*/
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span {
    background: #fff;
}
#fp-nav ul li, .fp-slidesNav ul li {
    width: 5px;
    height: 10px;
    margin: 6px;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span {
    width: 6px;
    height: 6px;
    border: 0 solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.5);
}
#menu { margin: 0; padding: 0; position: fixed; left: 10px; bottom: 10px; list-style-type: none; z-index: 70;display: none;}
#menu li { float: left; margin:  0 5px 0 0; font-size: 12px;}
#menu a { float: left; padding:5px 10px; background-color: #fff; color: #333; text-decoration: none;}
#menu .active a { color: #fff; background-color: #333;}
body,html{margin: 0 auto;overflow: hidden;}
.section {font:16px "Microsoft Yahei"; color: rgba(255, 255, 255, 0.51);overflow: hidden;}


.s1>div{position: absolute;}
.s1 img{width: 100%;height: 100%;}
.s1 .box-1{width:50%;height: 100vh;top:0;right:-100%;transition: 1s;opacity: .5;}
.s1 .box-2{width:0;left:-5%;bottom:35%;transition: 1s .5s;}
.s1 .box-3{width:0;right:-15%;bottom:25%;transition: 1s .5s;}
.s1 .box-4{width:0;left:5%;top:10%;transition: 1s 1s;}
.s1 .box-5{width:0;right:5%;top:18%;transition: 1s 1s;}
.s1 .box-6{width:0;left:5%;top:26%;transition: 1s 1s;}
.s1 .box-7{width:8%;right:48%;top:35%;transition: 1s 1s;transform: rotate(-100deg);opacity: 0;}
.s1 .box-8{width:7%;left:48%;top:33%;transition: 1s 1s;transform: rotate(100deg);opacity: 0;}
.s1 .box-9{width:70%;left:15%;bottom:30%;transition: 1s 2.5s;transform:scale(0,0) rotate(-7deg);box-shadow: 2px 2px 10px #999;}
.s1 .box-9 img{float:left;}
.s1 .box-10{width:70%;left:5%;top:25%;color: #555;opacity: 0;transition: 1s 2s; }
.s1 .box-11{width:70%;right:5%;top:31%;color: #555;text-align: right;opacity: 0; transition: 1s 2s;  }
.s1 .box-12{width:70%;left:5%;top:39%;color: #555; opacity: 0;transition: 1s 2s;  }
.s1 .box-13{width: 20%;left:-32%;bottom:5%;opacity: 0;transition: 1s 2s;}
.s1 .box-14{width: 20%;right:-32%;bottom:5%;opacity: 0;transition: 1s 2s;}
.s1.active .box-1{right:0;}
.s1.active .box-2{width: 25%;}
.s1.active .box-3{width: 38%;}
.s1.active .box-4{width: 70%;}
.s1.active .box-5{width: 70%;}
.s1.active .box-6{width: 70%;}
.s1.active .box-7{transform: rotate(0deg);opacity: 1;}
.s1.active .box-8{transform: rotate(0deg);opacity: 1;}
.s1.active .box-9{transform:scale(1,1) rotate(-7deg);}
.s1.active .box-10{top:8%;opacity:1;}
.s1.active .box-11{top:16%;opacity:1;}
.s1.active .box-12{top:24%;opacity:1;}
.s1.active .box-13{left:32%;opacity:1;}
.s1.active .box-14{right:32%;opacity:1;}



.s2 img{width: 100%;}
.s2 > div{position: absolute;}
.s2{background:url(../img/fullpage/8.jpg);background-repeat: no-repeat;background-size: cover;}
.s2 .box-1{width: 105%;right:-3%;top:0;transform: rotate(-90deg);transition: 1s;transform-origin:0 100%; }
.s2 .box-2{width: 90%;top:13%;left:4%;transform: rotate(-90deg);transition: 1s;transform-origin:0 100%; }
.s2 .box-3{width: 70%;  top: 17.3%;  left: 14%;  transform: rotate(-9deg) scale(0,0);transition: 1s 1s;}
.s2 .box-4{width: 50%;bottom:-100%;right:0;transition: 1s;}
.s2 .box-5{width: 10%;top:10%;right:-50%;transition: 1s;opacity: 0;}
.s2 .box-6{width: 60%;right:0;bottom:-5px;opacity: 0;transition: 1s;}
.s2 .box-8{width:38%;top:-5%;bottom:0;}
.s2 .box-8 img{transform: scale(0,0);transition: 1s;}
.s2.active .box-1{transform: rotate(0deg);}
.s2.active .box-2{transform: rotate(0deg);}
.s2.active .box-8 img{transform: scale(1,1);}
.s2.active .box-3{transform: rotate(-9deg) scale(1,1);}
.s2.active .box-4{bottom:-2px;}
.s2.active .box-5{opacity: 1;right:0;}
.s2.active .box-6{opacity: 1;}

@keyframes page3
{
    0%{ transform:scale(1.03,1.03);opacity: 0;}
    33%{transform:scale(0.8,0.8);}
    66%{transform:scale(1.03,1.03);}
    100%{transform:scale(1,1);opacity: 1;}
}

@-moz-keyframes page3 /* Firefox */
{
    0%{ transform:scale(1.03,1.03);opacity: 0;}
    33%{transform:scale(0.8,0.8);}
    66%{transform:scale(1.03,1.03);}
    100%{transform:scale(1,1);opacity: 1;}
}

@-webkit-keyframes page3 /* Safari 和 Chrome */
{
    0%{ transform:scale(1.03,1.03);opacity: 0;}
    33%{transform:scale(0.8,0.8);}
    66%{transform:scale(1.03,1.03);}
    100%{transform:scale(1,1);opacity: 1;}
}

@-o-keyframes page3 /* Opera */
{
    0%{ transform:scale(1.03,1.03);opacity: 0;}
    33%{transform:scale(0.9,0.9);}
    66%{transform:scale(1.03,1.03);}
    100%{transform:scale(1,1);opacity: 1;}
}

.s3 img {width: 100%;height:100%; }
.s3{background: rgb(227, 228, 229);}
.s3>div{position: absolute;}
.s3 .box-1{width: 80%;left:8%;top:30%;}
.s3 .box-2{width:15%;top:5%;left:5%;}
.s3 .box-3{width:35%;top:3%;left:25%;}
.s3 .box-4{width:23%;top:12%;left:48%;}
.s3 .box-5{width:18%;top:10%;right:5%;}
.s3 .box-6{width:10%;top:30%;left:2%;}
.s3 .box-7{width:23%;top:21%;left:11%;}
.s3 .box-8{width:18%;top:25%;left:28%;}
.s3 .box-9{width:15%;top:21%;right:5%;}
.s3 .box-10{width:15%;top:25%;right:18%;}
.s3 .box-11{width:15%;top:50%;right:5%;}
.s3 .box-12{width:9%;top:73%;left:40%;}
.s3 .box-13{width:14%;top:60%;left:8%;}
.s3 .box-14{width:18%;top:63%;left:16%;}
.s3 .box-15{width:30%;top:70%;right:10%;}
.s3 .box-16{width:25%;top:60%;right:17%;}
.s3 .box-17{width:28%;top:79%;left:-1%;}
.s3 .box-18{width:18%;top:85%;left:42%;}
.s3 .box-19{width:18%;bottom:-2%;left:13%;}
.s3 .box-20{width:24%;bottom:0;right:3%;}
.s3 .box-21{width:24%;bottom:46%;left:-4%;}
.s3.active .box-1{animation:page3 1.5s  1 both;-webkit-animation:page3 1.5s  1 both;}
.s3.active .box-2{animation:page3 1.5s 1s 1 both;-webkit-animation:page3 1.5s 1s 1 both;}
.s3.active .box-3{animation:page3 1.5s 1.1s 1 both;-webkit-animation:page3 1.5s 1.1s 1 both;}
.s3.active .box-4{animation:page3 1.5s 1.2s 1 both;-webkit-animation:page3 1.5s 1.2s 1 both;}
.s3.active .box-5{animation:page3 1.5s 1.3s 1 both;-webkit-animation:page3 1.5s 1.3s 1 both;}
.s3.active .box-6{animation:page3 1.5s 1.4s 1 both;-webkit-animation:page3 1.5s 1.4s 1 both;}
.s3.active .box-7{animation:page3 1.5s 1.5s 1 both;-webkit-animation:page3 1.5s 1.5s 1 both;}
.s3.active .box-8{animation:page3 1.5s 1.6s 1 both;-webkit-animation:page3 1.5s 1.6s 1 both;}
.s3.active .box-9{animation:page3 1.5s 1.7s 1 both;-webkit-animation:page3 1.5s 1.7s 1 both;}
.s3.active .box-10{animation:page3 1.5s 1.8s 1 both;-webkit-animation:page3 1.5s 1.8s 1 both;}
.s3.active .box-11{animation:page3 1.5s 1.9s 1 both;-webkit-animation:page3 1.5s 1.9s 1 both;}
.s3.active .box-12{animation:page3 1.5s 2s 1 both;-webkit-animation:page3 1.5s 2s 1 both;}
.s3.active .box-13{animation:page3 1.5s 2.1s 1 both;-webkit-animation:page3 1.5s 2.1s 1 both;}
.s3.active .box-14{animation:page3 1.5s 2.2s 1 both;-webkit-animation:page3 1.5s 2.2s 1 both;}
.s3.active .box-15{animation:page3 1.5s 2.3s 1 both;-webkit-animation:page3 1.5s 2.3s 1 both;}
.s3.active .box-16{animation:page3 1.5s 2.4s 1 both;-webkit-animation:page3 1.5s 2.4s 1 both;}
.s3.active .box-17{animation:page3 1.5s 2.5s 1 both;-webkit-animation:page3 1.5s 2.5s 1 both;}
.s3.active .box-18{animation:page3 1.5s 2.6s 1 both;-webkit-animation:page3 1.5s 2.6s 1 both;}
.s3.active .box-19{animation:page3 1.5s 2.7s 1 both;-webkit-animation:page3 1.5s 2.7s 1 both;}
.s3.active .box-20{animation:page3 1.5s 2.8s 1 both;-webkit-animation:page3 1.5s 2.8s 1 both;}
.s3.active .box-21{animation:page3 1.5s 2.9s 1 both;-webkit-animation:page3 1.5s 2.9s 1 both;}

.s4{background: url(../img/fullpage/26.jpg);background-repeat: no-repeat;background-size: cover;}
.s4>div{  position:absolute; }
.s4 img {width: 100%;height:100%; }
.s4 .box{width: 300px;margin: 0 auto;position: relative;top:35%;height: 300px;}
.s4 .box>div{position: absolute;box-sizing:border-box;border:1px solid #fff;transform: rotateY(90deg);box-shadow: 0 0 5px #ccc;}
.s4 .box-1{width: 30px;height:30px;top:0;left:0;transition: 1s 1s;}
.s4 .box-2{width: 80px;height:80px;top:0;left:30px;transition: 1s 1.1s;}
.s4 .box-3{width: 80px;height:80px;top:0;left:110px;transition: 1s 1.2s;}
.s4 .box-4{width: 80px;height:80px;top:0;left:190px;transition: 1s 1.3s;}
.s4 .box-4{width: 80px;height:80px;top:0;left:190px;transition: 1s 1.4s;}
.s4 .box-5{width: 30px;height:30px;top:0;right:0;transition: 1s 1.5s;}
.s4 .box-6{width: 30px;height:30px;top:30px;left:0;transition: 1s 1.6s;}
.s4 .box-7{width: 30px;height:30px;top:30px;right:0;transition: 1s 1.7s;}
.s4 .box-8{width: 30px;height:30px;top:-30px;right:0;transition: 1s 1.8s;}
.s4 .box-9{width: 30px;height:30px;top:-30px;left:0;transition: 1s 1.9s;}
.s4 .box-10{width: 64px;height:64px;top:-64px;left:30px;transition: 1s 2s;}
.s4 .box-11{width: 64px;height:64px;top:-64px;right:30px;transition: 1s 2.1s;}
.s4 .box-12{width: 30px;height:30px;top:-30px;right:94px;transition: 1s 2.2s;}
.s4 .box-13{width: 30px;height:30px;top:-30px;left:94px;transition: 1s 2.3s;}
.s4 .box-14{width: 80px;height:80px;top:80px;left:110px;transition: 1s 2.4s;}
.s4 .box-15{width: 30px;height:30px;top:80px;right:80px;transition: 1s 2.5s;}
.s4 .box-16{width: 30px;height:30px;top:80px;left:80px;transition: 1s 2.6s;}
.s4 .box-17{width: 30px;height:30px;top:110px;right:80px;transition: 1s 2.7s;}
.s4 .box-18{width: 30px;height:30px;top:110px;left:80px;transition: 1s 2.8s;}
.s4 .box-19{width: 30px;height:30px;top:80px;left:50px;transition: 1s 2.9s;}
.s4 .box-20{width: 30px;height:30px;top:80px;right:50px;transition: 1s 3s;}
.s4 .box-21{width: 30px;height:30px;top:160px;left:135px;transition: 1s 3.1s;}
.s4 .box-22{right:-5%;top:-5%;width:43%;opacity: 0;transition: 1s 1s;}
.s4 .box-23{right:10%;top:-5%;width:43%;opacity: 0;transition: 1s 1s;}
.s4 .box-24{left:0;top:0;width:66%;transform: scale(0,0);transition: 1s 1s;}
.s4 .box-25{left:5%;bottom:-5%;width:66%;transform: scale(0,0);transition: 1s 1s;}
.s4 .box-26{right:0;bottom:-3%;width:60%;transform: scale(0,0);transition: 1s 1s;}
.s4 .box-27{left:-5%;bottom:-3%;width:70%;transform: scale(0,0) rotate(-129deg);transition: 1s 1s;}
.s4 .box-28{left:5%;bottom:38%;width:10%;opacity: 0;transition: 3s 2s;}
.s4 .box-29{right:5%;bottom:28%;width:10%;opacity: 0;transition: 3s 2s;}
.s4 .box-30{right:5%;top:28%;width:10%;opacity: 0;transition: 3s 2s;}
.s4 .box-31{right:35%;top:8%;width:5%;opacity: 0;transition: 3s 2s;}
.s4.active .box>div{transform:rotateY(0deg);}
.s4.active .box-22{opacity: 1;}
.s4.active .box-23{opacity: 1;}
.s4.active .box-24{transform: scale(1,1)}
.s4.active .box-25{transform: scale(1,1)}
.s4.active .box-26{transform: scale(1,1)}
.s4.active .box-27{transform: scale(1,1) rotate(-129deg);}
.s4.active .box-28{opacity: 1;}
.s4.active .box-29{opacity: 1;}
.s4.active .box-30{opacity: 1;}
.s4.active .box-30{opacity: 1;}


@keyframes move4{
    0%{ transform:scale(1.03,1.03);opacity: 0;}
    33%{transform:scale(0.9,0.9);}
    66%{transform:scale(1.03,1.03);}
    100%{transform:scale(1,1);opacity: 1;}
}

.s6 > div{position: absolute;}
.s6 img{width:100%;}
.s6 .box-1{width: 100%;bottom:-50%;left:0;transition: 1s;}
.s6 .box-1 img{float:left;}
.s6 .box-2{width: 100%;top:0;left:-100%;transition: 1s;}
.s6 .box-3,.s6 .box-4{opacity: 0;transition: 1s;}
.s6 .box-4{width: 50%;left:25%;}
.s6 .box-5{width:0;left:25%;top:20%;transition: 1s 1s;}
.s6 .box-6{right:0;width: 28%;transition: 1s;top:-100%;}
.s6 .box-7{text-align: center;bottom: 28%;}
.s6 .box-7 img{width:0;transition: 1s 1s;}
.s6.active .box-1{bottom:0;}
.s6.active .box-2{left:0;}
.s6.active .box-3,.s6.active .box-4{opacity: 1;}
.s6.active .box-5{width: 50%;}
.s6.active .box-6{top:0;}
.s6.active .box-7 img{width: 66%;}

.s7 > div{position: absolute;}
.s7 img{width:100%;height:100%; }
.s7 .box-1 {width: 100vw;height:100vh; }
.s7 .box-2{width: 98vw;left:0.5vw;top:2vh;height: 96vh;transform: rotate(-360deg) scale(2,2);opacity: 0;transition:1s;}
.s7 .box-3{width:57vw;right:-100%;top:2vh;transition: 1s;}
.s7 .box-4{bottom:-50%;    width: 100%;transition: 1s 1.8s;}
.s7 .box-4 p{  width: 100%;  color: rgb(105, 68, 68);  font-size: 14px;  text-align: center;  line-height:25px;  }
.s7 .box{width: 90vw;top:8vh;left:5vw;height:56.5vh;}
.s7 .box>div{float:left;margin-left:.5%;width:19%;margin-right:.5%;height: 100%;position: relative;}
.s7 .box ul{background: rgba(211, 200, 197, 0.75);width: 100%;padding: 2px 0;top:-150%;position: absolute;opacity: 0;}
.s7 .box li{width: 90%;margin:3px auto;}
.s7 .box li:after{content:'';clear:both;display: block;}
.s7 .box img{width:100%;float:left;}
.s7 .box-5{margin-top:12vh;}
.s7 .box-6{margin-top:5vh;}
.s7 .box-7{margin-top:12vh;}
.s7 .box-8{margin-top:5vh;}
.s7 .box-9{margin-top:12vh;}
.s7 .box-5 ul{transition: 1s 1s;}
.s7 .box-6 ul{transition: 1s 1.2s;}
.s7 .box-7 ul{transition: 1s 1.4s;}
.s7 .box-8 ul{transition: 1s 1.6s;}
.s7 .box-9 ul{transition: 1s 1.8s;}
.s7.active .box-2{transform: rotate(0deg) scale(1,1);opacity: 1;}
.s7.active .box-3{right: 0;}
.s7.active .box-4{bottom: 5vh;}
.s7.active .box-5 ul,.s7.active .box-6 ul,.s7.active .box-7 ul,.s7.active .box-8 ul,.s7.active .box-9 ul{top:0;opacity: 1;}


    .position{position: absolute;left:0;top:0;}
@media screen and (max-width:640px){
    .position{display: none;}
}
@media screen and (min-width:640px){
    body{width: 375px;height:667px!important;margin: 0 auto;margin-top:calc((100vh - 667px) / 2);}
    .section{height:667px!important;}
}

